<section class="home">
	<div class="navigation global-left-side">
		<a href="###" class="control-button"><b></b></a>
		<div class="contact-buttons">
			<ul class="buttons">
				<li class="receive">
					<span class="icon"></span>
					<span class="name">收信</span>
				</li>
				<li class="write">
					<span class="icon"></span>
					<span class="name">写信</span>
				</li>
			</ul>
		</div>
		<div id="navTree">
		</div>
	</div>
	<div id="home_panel" name="home_panel" class="global-body">
		<form>
			<h1 class="global-title-bar">示例表单</h1>
			<div>
				<label for="userid">姓名</label>
				<input type="text" id="userid" name="userid" value="张三" />
			</div>
			<div>
				<label>性别</label>
				<select id="sex" name="sex"><option>男</option><option>女</option></select>
			</div>
			<div>
				<label>简介</label>
				<textarea style="font-size: 12px;">填写内容...</textarea>
			</div>
			<button>提交</button>
		</form>
		<p style="margin-left: 10px;">
			<label>选择主题：<select id="themesList"></select></label>
			<button id="setThemesBtn">应用主题</button>
		</p>
		<table class="global-table" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin-left: 10px;">
			<tr>
				<th width="80">姓名</th>
				<th width="80">性别</th>
				<th>简介</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>男</td>
				<td>没有什么简介的</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>男</td>
				<td>简介内容</td>
			</tr>
			<tr>
				<td>王五</td>
				<td>男</td>
				<td>这个家伙很懒，什么东西都没留下</td>
			</tr>
			<tr>
				<td>赵六</td>
				<td>男</td>
				<td></td>
			</tr>
		</table>
	</div>
</section>
<script type="text/javascript">
	(function() {
		// 加载主题
		var tl = $('#themesList');
		var skin = new Neter.Skin();

		$.getJSON('../themes/manifest.json', function(data) {
			for (var p in data) {
				$('<option value=' + p + '>' + p + '</option>').appendTo(tl);
			}
		});
		$('#setThemesBtn').on('click', function() {
			alert(tl.val());
			skin.status() && skin.applying(tl.val());
		});


		var accordion = new Neter.Accordion({
			width : 'auto',
			container : $('#navTree'),
			items : [{
				name : '收件箱'
			}, {
				name : '红旗邮件',
				data : '自定义数据'
			}, {
				name : '草稿箱'
			}, {
				name : ''
			}, {
				name : '文件中心',
				subMenus : [{
					name : '网盘'
				}, {
					name : '附件'
				}, {
					name : '云附件'
				}, {
					name : '相册'
				}]
			}],
			itemEvent : function(accordion, options) {
				options.name == '收件箱' && navigation.active(options.name);
				// console.log(options);
			}
		})
		.render()
		// 自动选择第2个菜单，并且触发菜单事件，如果不想触发传递第二个参数为false
		.selected(1/*, false */);
		
		
		var nav = $('.navigation'),
			flag = 1,
			orig = {
				width : nav.width(),
				height : nav.height()
			};
		
		// 给左侧增加显示与隐藏滚动条事件，这个事件只有在出现滚动条时能看出效果。
		$('#navTree')
			.mouseenter(function() { $(this).css({'overflow' : 'auto'}); })
			.mouseleave(function() { $(this).css('overflow', 'hidden'); })
			// 当滚动了窗口则增加一个阴影。
			.scroll(function(e) {
				$('.contact-buttons').css('box-shadow' , $(this).scrollTop() > 0 ? '-2px 2px 6px rgba(0, 0, 0, .1)' : '');
			});;
		
		// 窗口调整大小时进行重新页面布局
		$(window).resize(function() {
			var height = $('#view').height($('body').height() - $('#header').height()).height(),
				nw     = nav.width();
			
			$('#home_panel').width($('body').width() - (nw > 15 ? 200 : 0)).height(height).css('left', nw > 15 ? 201 : 0);
			
			(nw > 15) && nav.height($('#home_panel').height());
			
			$('#navTree').css('height', height - 55);
			
			// 当左侧列表宽度大于15时，即为展开状态，这时候需要更新原始左侧的大小。
			nw > 15 && (orig = {
				width : nav.width(),
				height : nav.height()
			});
		}).trigger('resize');
		
		// 展开与折叠左侧列事件
		$('.control-button').live('click', function() {
			var self = $(this);
			
			// 互斥执行下面的两组事件
			!~(flag = flag * -1)
				// 折叠事件
				? $('.navigation').animate({ width  : 0 }, 20, function() {
					  $(this).find('b').css('background', 'url(../resources/images/arrow_right.png) no-repeat 0 0 ');
					  $(window).trigger('resize');
				  })
				// 展开事件
				: $('.navigation').animate({ width : orig.width }, 20, function() {
					  $(this).find('b').css('background', 'url(../resources/images/arrow_left.png) no-repeat 0 0 ');
					  $(window).trigger('resize');
				  });
		});
	})();
</script>